import React, { useState } from 'react'

// React.memo 是用来缓存一个组件用的，只有组件内容的内容发生改变才会被重新渲染
const Child = React.memo((props) => {

    console.log('Child被执行了');
    return <h1>Child - {props.name}</h1>
})

/*
    在父组件中定义一个接收的函数 changeName 
    将 changeName  传递给子组件
    在子组件中不需要做任何操作
    在父组件中修改 count 值，会导致 App 组件被重新渲染
    那么 changeName 就会重新创建
    会导致子组件又被 count 改变所影响到

    怎么样让函数传递，也不会收到 count 影响
*/

export default function App() {

    const [count, setcount] = useState(100)
    const [name, setname] = useState('张三')

    // 定义一个修改名字的函数
    function changeName(val) {
        setname(val)
    }

    return (
        <div>
            <h1>App - {count}</h1>
            <button onClick={() => {
                setcount(count + 1)
            }}>点击加 1</button>


            <hr />

            {/* 
                每次 count 发生改变的时候，都会导致 Child 组件被重新渲染，但是 count 
                的改变和 Child 组件又没有任何关联。
                如果每次都重新渲染子组件，会太浪费资源了，所以有没有什么办法可以让 count 
                的改变不影响子组件的渲染
            */}
            <Child name={name} changeName={changeName} />
        </div>
    )
}
